<template>
  <div class="mycollect-album">
    <div style="line-height: 50px;
                font-weight: 700;
                color: #2a2727;
                padding-left: 25px">
      收藏的专辑({{total}})
    </div>
    <div class="album">
      <div v-for="(item, index) in albumList" :key="index" class="itemInfo" @click="goDetail(item)">
        <img style="height: 160px" v-lazy="item.picUrl" alt="">
        <div class="big-play">
          <img src="~@/assets/img/home/play-m.svg" alt="">
        </div>
        <p>{{ item.name }}</p>
        <div class="singer_box">
        <span class="singer"
              v-for="(iitem, index) in item.artists"
              :key="index">
            {{ iitem.name }}
        </span>
        </div>
      </div>
    </div>
    <!--      分页按钮-->
    <div style="width: 100%">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="18"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {mycollect} from "@/network/mycollect";

  export default {
    name: "MyCollectAlbum",
    data(){
      return{
        albumList:[], //请求的专辑数据
        total:0,        //专辑数量
        currentPage: 0, //当前页
      }
    },
    created() {
      this.getSubAlbum()
    },
    methods:{
      //路由跳转
      goDetail(item){
        this.$router.push('/album/song/id=' + item.id)
      },
      //点击分页切换页数的函数
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getSubAlbum(this.currentPage * 30)
      },


      // 请求收藏的专辑数据
      getSubAlbum(offset, limit = 18){
        mycollect.getSubAlbum(offset, limit).then(res => {
          this.albumList = res.data.data
          this.total = res.data.count
        })
      },
    },
  }
</script>

<style scoped>
.album{
  padding: 10px 20px;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.itemInfo{
  width: 15%;
  margin-right: 17px;
  margin-bottom: 15px;
  position: relative;
}
.itemInfo img:nth-child(1){
  width: 100%;
  border-radius: 7px;
  cursor: pointer;
}
.itemInfo p{
  width: 100%;
  font-size: 13px;
  color: rgb(92, 81, 81);
  line-height: 20px;
  margin-top: -24px;
  /*多行文本溢出*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.singer_box{
  width: 100%;
  /*多行文本溢出*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.singer{
  font-size: 12px;
  color: #a9a9bb;

}
.big-play{
  width: 27px;
  height: 27px;
  position: relative;
  top: -38px;
  left: 126px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0;
  transition: all .8s;
}
.itemInfo:hover .big-play{
  opacity: 1;
}
.big-play{
  background-color: #e85252;
}
.big-play img{
  width: 100%;
  height: 100%;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
